<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg{
      background-color: #eee;
    }
  </style>
</head>
<body>
  <!-- 
    所有的svg都可以使用这个属性
    transform  值都是没有单位的
    rotate(旋转度数 x,y)
    scale(x,y) 横轴纵轴的放大比例  基准点是在 当前svg对应的标签左上角
              //  若要把放大的基准点设置在中心 需要结合translate
   -->
  <svg width="400" height='400'>
    <text x=20 y=100  fill='red' transform="scale(1.2,1.2)">hello world</text>
    <text x=20 y=100  fill='red'  transform="translate(20,20) rotate(45 50,125)">hello world</text>
    <text x=10 y=10 fill='red'>
      hello
      <tspan x=15 y=30>珠峰</tspan>
      <tspan x=15 y=50>培训</tspan>
    </text>
    <a xlink:href='https://baidu.com'>
      <text x=100 y=100>baidu </text>
    </a>
  </svg>

  <svg width="400" height='400'>
    <defs>
      <path id='ppp' fill='none' stroke='red' d='M20,100 C18,80 25,80 80,100 L90,300'></path>
    </defs>
    <use xlink:href="#ppp"></use>
    <text stroke='blue' font-size='30'>
      <textPath xlink:href='#ppp'>
        你好 hello 珠峰 培训
      </textPath>
    </text>
  </svg>

</body>
</html>